<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>11_Promise对象</title>
</head>
<body>
<!--
1. 理解:
  * Promise 对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了 promise 对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6 的 Promise 是一个构造函数, 用来生成 promise 实例
2. 使用 promise 基本步骤(2步):
  * 创建 promise 对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用 promise 的 then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise 对象的 3 个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用 promise 实现超时处理
  * 使用 promise 封装处理 ajax 请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();
-->
<script type="text/javascript">
  // 创建一个 promise 实例对象
  let promise = new Promise((resolve, reject) => {
    // 初始化 promise 的状态为 pending---->初始化状态
    console.log('1111'); // 同步执行
    // 启动异步任务
    setTimeout(function () {
      console.log('3333');
      //resolve('atguigu.com'); // 修改 promise 的状态 pending---->fullfilled（成功状态）
      reject('xxxx'); // 修改 promise 的状态 pending----->rejected(失败状态)
    }, 1000);
  });
  promise.then((data) => {
    console.log('成功了。。。' + data);
  }, (error) => {
    console.log('失败了' + error);
  });
  // promise.catch(function (error) {
  //   console.log('失败了' + error);
  // })
  console.log('2222');


  // 定义一个请求 news 的方法
  function getNews(url) {
    // 创建一个 promise 对象
    let promise = new Promise((resolve, reject) => {
      // 初始化 promise 状态为 pending
      // 启动异步任务
      let request = new XMLHttpRequest();
      request.onreadystatechange = function () {
        // 0-1-2-3-4
        if (request.readyState === 4) {
          if (request.status === 200) {
            console.log(request.responseText);
            resolve(request.response);
          } else {
            reject('请求失败了。。。');
          }
        }
      };
      request.responseType = 'json'; // 设置返回的数据类型
      request.open("GET", url); // 规定请求的方法，创建链接
      request.send(); // 发送
    })
    return promise;
  }

  // es_server>node bin\www
  getNews('http://localhost:3000/news?id=2')
    .then((news) => {
      console.log(news);
      document.write(JSON.stringify(news));
      console.log('http://localhost:3000' + news.commentsUrl);
      return getNews('http://localhost:3000' + news.commentsUrl);
    }, (error) => {
      alert(error);
    })
    .then((comments) => {
      console.log(comments);
      document.write('<br><br><br><br><br>' + JSON.stringify(comments));
    }, (error) => {
      alert(error);
    })
</script>
</body>
</html>
